import React, { useState,useEffect } from 'react'
import  userService,{queryUser} from  "./service/UserService"
import UserModel from "./model/userModel";
import UserList from "./components/UserList";
import UserAdd from "./components/UserAdd";

export default function App() {

    const [list, setlist] = useState<Array<UserModel>>([]);


    useEffect(() => {
        queryUser({}).then(res=>{
            setlist(res.data);
        })
      return () => {
        
      }
    }, [])
    

    let delListById =async (id: number) => {
        await  userService.delUser(id);
        setlist(list.filter(item => item.id !== id));
    }

    let addListItem =async (item: UserModel) => {
        let {data} = await  userService.addUser(item);
        setlist([...list, data]);
    }
    let search = async  (str:string)=>{
        let {data} = await queryUser({"username_like":str});
        setlist(data);
    }


    return (
        <div>
            <UserAdd addListItem={addListItem}></UserAdd>
            <hr/>

            <input onChange={(e)=>{
                search(e.target.value);
            }}/>
            <UserList list={list} delListById={delListById}></UserList>
        </div>
    )
}
